<template>
  <div class="b-nav">
    <slot name="b_arrow-left">
      <div class="b-nav-left">
        <svg
          @click="clickImg"
          t="1619518953235"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1361"
          width="20"
          height="20"
        >
          <path
            d="M984 657c22.092 0 40-17.908 40-40v-410c0-88.224-71.776-160-160-160H520c-68.074 0-128.82 43.182-151.16 107.452-2.608 7.506-10.092 12.548-18.622 12.548H280v-40c-2.114-53.072-77.906-53.032-80 0v40H160c-88.224 0-160 71.776-160 160v490c0 88.224 71.776 160 160 160h704c88.224 0 160-71.776 160-160 0-22.092-17.908-40-40-40s-40 17.908-40 40c0 44.112-35.888 80-80 80H280v-530c-2.114-53.072-77.906-53.032-80 0v530H160c-44.112 0-80-35.888-80-80v-490c0-44.112 35.888-80 80-80h190.218c42.554 0 80.406-26.636 94.188-66.282C455.574 148.588 485.954 127 520 127h164v40c0 66.168 53.832 120 120 120h140v330c0 22.092 17.908 40 40 40z m-180-450c-22.056 0-40-17.944-40-40v-40h100c44.112 0 80 35.888 80 80z m-190 110c-137.85 0-250 112.15-250 250 13.734 331.658 486.318 331.562 500-0.002 0-137.848-112.15-249.998-250-249.998z m0 420c-93.738 0-170-76.262-170-170 9.338-225.528 330.696-225.462 340 0.002 0 93.736-76.262 169.998-170 169.998z m40-222c0 22.092-17.908 40-40 40-6.618 0-12 5.382-12 12 0 22.092-17.908 40-40 40s-40-17.908-40-40c0-50.73 41.272-92 92-92 22.092 0 40 17.908 40 40z"
            p-id="1362"
          ></path>
        </svg>
      </div>
    </slot>
    <div class="b_mid_shadow"></div>
    <div class="b_mid">{{ title }}</div>
    <div class="b-nav-right">
      <slot name="b_option"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "b_nav",
  data() {
    return {};
  },
  provide() {
    return {
      bNav: this,
    };
  },
  methods: {
    clickImg() {
      alert("我是摄像机");
    },
  },
  props: {
    title: {
      type: String,
    },
    alignCenter: {},
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped >
.b-nav {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  z-index: 100;
  background: #f6f6f6;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px 24px;
  padding-left: 0;
  font-size: 20px;
  box-sizing: border-box;
}

.b-nav-left {
  width: 60px;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 9;
  padding-left: 24px;
}
.b_mid_shadow {
  margin: auto;
}
.b_mid {
  font-size: 20px;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 1;
}
.b-nav-right {
  // font-size: 32px;
  z-index: 9;
}
</style>
